<template>
  <div class="bff-icon-svg">
    <img
      v-show="isImg"
      :src="imgSrc"
      :style="{
        width: width + 'px',
        height: height + 'px',
        display: 'block'
      }"
    />
    <div
      v-show="!isImg"
      ref="svgIcon"
      class="svgDiv"
      :style="{
        width: width + 'px',
        height: height + 'px',
        lineHeight: 'normal'
      }"
    ></div>
  </div>
</template>

<script>

export default {
  name: 'ShIconSvg',
  props: {
    // 主题 dark/light
    theme: {
      type: String,
      // default: 'light'
      default: 'dark'
    },
    // 自定义图标宽
    width: {
      type: Number
    },
    // 自定义图标高
    height: {
      type: Number
    },
    padding: {
      type: Number
    },
    // 填充色
    fillcolor: {
      type: String
    },
    // 填充透明度
    fillop: {
      type: Number
    },
    // 图标名
    iconClass: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isImg: false,
      imgSrc: ''
    };
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    }
  },
  watch: {
    width: {
      handler() {
        if (this.width) {
          this.$nextTick(() => {
            this.$refs.svgIcon &&
              this.$refs.svgIcon.style.setProperty(
                '--svgWidth',
                this.width + 'px'
              );
          });
        }
      },
      immediate: true
    },
    height: {
      handler() {
        if (this.height) {
          this.$nextTick(() => {
            this.$refs.svgIcon &&
              this.$refs.svgIcon.style.setProperty(
                '--svgHeight',
                this.height + 'px'
              );
          });
        }
      },
      immediate: true
    },
    Padding: {
      handler() {
        if (this.padding) {
          this.$nextTick(() => {
            this.$refs.svgIcon &&
              this.$refs.svgIcon.style.setProperty(
                '--svgPadding',
                this.padding + 'px'
              );
          });
        }
      },
      immediate: true
    },
    iconClass: {
      handler() {
        this.$nextTick(() => {
          // let svgUrl = '!raw-loader!../assets/svg/' + this.iconClass + '.svg';
          try {
            var context = require.context(
              '!raw-loader!../../../src/assets/svg/',
              true,
              /.svg$/
            );
            // 第一个参数：文件的路径，搜索目录下所有的文件
            // 第二个参数：是否搜索子目录
            // 第三个参数：正则表达式， “svg文件”
            let svgData = context('./' + this.iconClass + '.svg');
            console.log('----------svgData', svgData);
            if (svgData && svgData.default) {
              this.isImg = false;
              this.$nextTick(() => {
                if (this.$refs.svgIcon) {
                  this.$refs.svgIcon.innerHTML = svgData.default;
                }
              });
            } else {
              this.isImg = true;
              this.imgSrc = this.iconClass;
            }
          } catch (e) {
            this.isImg = true;
            this.imgSrc = this.iconClass;
          }
        });
      },
      immediate: true
    },
    theme: {
      handler: function (val) {
        let fl2Color, fl1Color;
        if (val === 'light') {
          fl1Color = this.fillcolor ? this.fillcolor : '#467CF3';
          fl2Color = '#1DB28E';
        } else {
          fl1Color = this.fillcolor ? this.fillcolor : '#FFFFFF';
          fl2Color = '#00FFFF';
        }
        this.$nextTick(() => {
          if (this.$refs.svgIcon) {
            this.$refs.svgIcon.style.setProperty('--fl1Color', fl1Color);
            this.$refs.svgIcon.style.setProperty('--fl2Color', fl2Color);
          }
        });
      },
      immediate: true
    },
    fillcolor: {
      handler: function (val) {
        if (val) {
          let fl1Color = val;

          this.$nextTick(() => {
            this.$refs.svgIcon &&
              this.$refs.svgIcon.style.setProperty('--fl1Color', fl1Color);
          });
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    handle(event) {
      this.$emit('handle', event);
    },
    handleClick(event) {
      this.$emit('handleClick', event);
    }
  }
};
</script>
<style scoped lang="scss">
.bff-icon-svg{
  display: inline-block;

  .svgDiv {
    fill: currentColor;
    overflow: hidden;
  }

  svg {
    width: var(--svgWidth);
    height: var(--svgHeight);
    padding: var(--svgPadding);
    vertical-align: top !important;
  }

  /* 只有一个path */
  path:nth-last-child(1):first-child {
    fill: var(--fl1Color);
  }

  /* svg包含两个path */
  path:nth-last-child(2):first-child ~ path {
    fill: var(--fl2Color);
  }

  /* svg包含两个path */
  path:nth-last-child(2):first-child {
    fill: var(--fl1Color);
  }

  rect {
    fill: var(--fl2Color);
  }

  polygon {
    fill: var(--fl2Color);
  }

  path {
    fill: var(--fl1Color);
  }
}
</style>
